<template>
  <div class="box">
    <div
      :class="['list-item', activeIndex === index ? 'active' : '']"
      v-for="(item, index) in data"
      :key="item.id"
      @click="handelClick(item, index)"
    >
      <img
        :src="
          activeIndex === index
            ? '/static/icon/' + item.subjectIconSelect
            : '/static/icon/' + item.subjectIconDefault
        "
        alt=""
      />
      <span class="text">{{ item.subjectName }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, provide } from 'vue'
import { useMapStoreStore } from '../../../stores/index'
import { getSysMapSubjectList } from '../../../api/sysmapsubject'
import { addMapLayer, delMapLayer,toViewEarthQuakeCenter } from '../../../api/gis2d/maputils'
import { useUserStore } from '@/store/modules/user'
const data = ref([])
const store = useMapStoreStore()
const userInfo = useUserStore()
const activeIndex = ref(-1)
let activeurl = ''

const mimeMap = {
  zqbj: [
    {
      id: 101,
      title: '震区基本情况',
      type: 'text',
      data: 'zxz'
    },
    {
      id: 1,
      title: '中心站(震中距)',
      type: 'table',
      data: 'zxz'
    }
  ],
  kspg: [
    {
      id: 2,
      title: '各烈度区面积',
      type: 'chart',
      data: 'ldqmj'
    },
    {
      id: 3,
      title: '各烈度区人口',
      type: 'chart',
      data: 'ldqrk'
    }
  ],
  czdz: [
    {
      id: 4,
      title: '不同震级区间成灾地震个数',
      type: 'chart',
      data: 'czdz'
    }
  ],
  lsdz: [
    {
      id: 5,
      title: '不同震级区间历史地震个数',
      type: 'chart',
      data: 'lsdz'
    }
  ],
  rk: [
    {
      id: 6,
      title: '人口总数统计',
      type: 'chart',
      data: 'rk'
    },
    {
      id: 7,
      title: '人口密度统计',
      type: 'chart',
      data: 'rkmd'
    }
  ],
  yy: [
    {
      id: 8,
      title: '各烈度区医院统计',
      type: 'chart',
      data: 'yy'
    }
  ],
  xx: [
    {
      id: 9,
      title: '各烈度区学校统计',
      type: 'chart',
      data: 'xx'
    }
  ],
  sk: [
    {
      id: 10,
      title: '各烈度区水库统计',
      type: 'chart',
      data: 'sk'
    }
  ],
  hp: [
    {
      id: 11,
      title: '各烈度区地质灾害统计',
      type: 'chart',
      data: 'hp'
    }
  ],
  jj: [
    {
      id: 12,
      title: '经济总数统计',
      type: 'chart',
      data: 'jj'
    },
    {
      id: 13,
      title: '经济密度统计',
      type: 'chart',
      data: 'jjmd'
    }
  ],
  10: [],
  jt: [
    {
      id: 14,
      title: '距离最近交通线',
      type: 'table',
      data: 'jt'
    }
  ]
}
const handelClick = (item, index) => {
  sessionStorage.setItem('handelClick', 'specialMap')
  const { layerCode, subjectCode, subjectOrder } = item
  if (activeIndex.value === index) {
    if (item.subLayers && item.subLayers.length > 0) {
      var arr = []
      for (const e of item.subLayers) {
        arr.push(e.layerCode)
      }
      store.delLayer(arr)
    }
    store.updateComponentsData([])
    activeurl = ''
    activeIndex.value = -1
    sessionStorage.setItem('handelClick', '')
    return
  }
  if (activeurl) {
    // if (item.subLayers && item.subLayers.length > 0) {
    //   var arr = []
    //   for (const e of item.subLayers) {
    //     if (e.layerUrl) {
    //       arr.push(e.layerCode)
    //     }
    //   }
    //   console.log(arr);

    store.delLayer(activeurl)
    // }
    store.updateComponentsData([])
  }
  if (item.subLayers && item.subLayers.length > 0) {
    var arr = []
    for (const e of item.subLayers) {
      if (e.layerUrl) {
        // addMapLayer(e.layerUrl, e.layerCode, e.subjectOrder || 1)
        arr.push(e.layerCode)
      }
    }
    store.addLayer(arr)
    activeurl = arr
  }

  activeIndex.value = index

  store.updateComponentsData(mimeMap[item.subjectCode])
  // if (subjectCode === 'rk') {
  //   store.radius = [10, 20, 50, 100]
  // }
toViewEarthQuakeCenter()
  setTimeout(() => {
    sessionStorage.setItem('handelClick', '')
  }, 0)
}

onMounted(() => {
  getSysMapSubjectList().then((res) => {
    if (userInfo.userInfo.divisionCode != 'root') {
         res = res.filter((e) => !e.statu)
    }
    // var newRes = res.filter((e) => !e.statu)
    data.value = res
  })
})
</script>

<style lang="scss" scoped>
.box {
  height: 100%;
  padding: 46px 0px;
  overflow-y: auto;
  font-size: 20px;
  color: #b9eeff;
  .list-item {
    height: 60px;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding-left: 35px;
    box-sizing: border-box;
  }
  .text {
    margin-left: 25px;
  }
  .list-item:hover {
    background: rgba(0, 19, 39, 0.5);
    color: #01c2ff;
  }
  .active {
    background: rgba(0, 19, 39, 0.5);
    color: #01c2ff;
  }
}
</style>